<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable
                      @keyup.enter.native="handleQuery" />
          </el-form-item>

        </el-col>
        <el-col :span="6">
        <el-form-item label="订单编号" prop="appletOrderCode">
          <el-input v-model="queryParams.appletOrderCode" placeholder="请输入订单编号" clearable
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属分类">
            <el-select
              v-model="queryParams.classify"
              placeholder="请选择商品分类"
              clearable

            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="下单时间" prop="createTime">
            <el-date-picker v-model="queryParams.createTime" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="支付时间" prop="payTime">
            <el-date-picker v-model="queryParams.payTime" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="订单完成时间" prop="finishTime">
            <el-date-picker v-model="queryParams.finishTime" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-tabs v-model="queryParams.appletOrderStatus" @tab-click="handleClick">
        <el-tab-pane v-loading.fullscreen.lock="fullscreenLoading" label="全部订单" name="0"></el-tab-pane>
        <el-tab-pane v-loading.fullscreen.lock="fullscreenLoading" label="待付款" name="1001"></el-tab-pane>
        <el-tab-pane v-loading.fullscreen.lock="fullscreenLoading" label="待发货" name="1002"></el-tab-pane>
        <el-tab-pane v-loading.fullscreen.lock="fullscreenLoading" label="已发货" name="1003"></el-tab-pane>
        <el-tab-pane v-loading.fullscreen.lock="fullscreenLoading" label="售后中" name="1007"></el-tab-pane>
        <el-tab-pane v-loading.fullscreen.lock="fullscreenLoading" label="已完成" name="1006"></el-tab-pane>
        <el-tab-pane v-loading.fullscreen.lock="fullscreenLoading" label="已取消" name="1004"></el-tab-pane>
      </el-tabs>
      <div v-if="infoList.length==0" style="display: flex;justify-content: center;margin-top: 50px;">
        <img src="../../../assets/images/zanwu.png" width="300" alt="">
      </div>
      <div class="contantlist" v-for="(item,index) in infoList">
        <div class="contantlist-top">
          <div>
            下单时间: {{item.appletOrderTime}}
          </div>
          <div>
            订单编号:{{item.appletOrderCode}}
          </div>
        </div>
        <div class="contantlist-center">

          <div>
            <div class="title">用户账号</div>
            <div>{{item.appletUserId}}</div>
          </div>
          <div>
            <div class="title">商品id</div>
            <div v-for="con in item.productDtos">{{con.productId}}</div>
          </div>
          <div>
            <div class="title">商品名称</div>
            <div v-for="con in item.productDtos">{{con.productName}}</div>
          </div>
          <div>
            <div class="title">订单金额</div>
            <div>
              订单金额:<span v-if="item.appletOrderType=='150'">¥</span>{{item.appletProductMoney}} <span v-if="item.appletOrderType=='151'">积分</span><br>
              <span v-if="item.appletOrderType=='150'">优惠:¥{{item.appletDiscountsMoney}} </span><br>
              <span v-if="item.appletOrderType=='150'">总计:¥{{item.appletOrderMoney}}</span>
            </div>
          </div>
          <div>
            <div class="title">订单类型</div>
            <div>
              {{item.appletOrderType=='150'?'商品订单':'积分订单'}}
            </div>
          </div>
          <div>
            <div class="title">订单状态</div>
<!--            <div>-->
<!--              <dict-tag :options="dict.type.order_status" :value="item.appletOrderStatus" />-->
<!--            </div>-->
          </div>
          <div>
            <div class="title">支付时间</div>
            <div>
              <span v-if="item.appletOrderStatus!=1001 && item.appletOrderStatus!=1004">{{item.appletPayTime}}</span>
            </div>
          </div>
          <div>
            <el-button type="primary" class="orderbtn" @click="orderbtn(item.appletOrderId)">订单详情</el-button>
            <el-button type="primary" class="orderbtn":class="item.appletOrderStatus==1007?'':'orderBtnHidden'" @click="afterSales(item.appletOrderId)">处理</el-button>
            <el-button type="primary" class="orderbtn" :class="item.appletOrderStatus==1002?'':'orderBtnHidden'" v-if="" @click="sendOut(item.appletOrderId)">发货</el-button>
          </div>
        </div>

      </div>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList" />

    <ordersee ref="ordersee"></ordersee>
    <el-dialog title="发货" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="快递公司" prop="appletExpressCompany">
          <el-select v-model="ruleForm.appletExpressCompany" placeholder="请选择快递公司" clearable style="width:100%">
            <el-option v-for="dict in dict.type.logistics" :key="dict.value" :label="dict.label"
                       :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号" prop="appletExpressCode">
          <el-input v-model="ruleForm.appletExpressCode" placeholder="请输入快递单号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <div style="text-align: right">
            <el-button type="primary" @click="submitSend('ruleForm')">确认发货</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="修改收货地址" :visible.sync="addressFlag">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="收件地址" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="收件人" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item >
          <div style="text-align: right">
            <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>


<!--    售后-->
    <el-dialog title="售后" :visible.sync="afterSalesFlag">
      <el-descriptions title="售后信息" :column="2" border style="margin-top: 20px;color: #1890ff;">
        <el-descriptions-item label="退款类型">{{afterSalesData.appletAfterType=='160'?'仅退款':'退货退款'}}</el-descriptions-item>
        <el-descriptions-item label="售后状态">{{afterSalesData.appletAfterStatusCon}}</el-descriptions-item>
        <el-descriptions-item label="退款原因">{{afterSalesData.appletAfterReason}}</el-descriptions-item>
        <el-descriptions-item label="退款金额">¥{{afterSalesData.appletAfterMoney}}</el-descriptions-item>
        <el-descriptions-item label="退款金额">¥{{afterSalesData.appletAfterMoney}}</el-descriptions-item>
        <el-descriptions-item label="描述和凭证">
          <el-image
          style="width: 100px; height: 100px"
          :src="url"
          :preview-src-list="srcList">
        </el-image></el-descriptions-item>
        <el-descriptions-item label="申请时间">{{afterSalesData.appleAfterTime}}</el-descriptions-item>
        <el-descriptions-item label="订单编号">{{afterSalesData.appletOrderId}}</el-descriptions-item>
        <el-descriptions-item label="售后单号">{{afterSalesData.appletAfterId}}</el-descriptions-item>
        <el-descriptions-item label="快递公司">{{afterSalesData.afterExpressCompany}}</el-descriptions-item>
        <el-descriptions-item label="快递单号">{{afterSalesData.afterExpressCode}}</el-descriptions-item>
        <el-descriptions-item label="收货地址">{{afterSalesData.appletAfterRemarks}}</el-descriptions-item>

      </el-descriptions>

      <div style="float: right;margin-top: 10px">
        <el-button v-if="afterSalesData.appletAfterStatusCon=='待审核'" type="primary" @click="agree">同意</el-button>
        <el-button    @click="refuse">拒绝</el-button>
        <el-button v-if="afterSalesData.appletAfterStatusCon=='同意已寄回'" type="primary" @click="agreeReceive">确认收货</el-button>
      </div>
      <div style="clear:both"></div>
    </el-dialog>
  </div>

</template>

<script>
import ordersee from "@/views/order/orderList/ordersee"

export default {
  dicts: [ 'order_status'],
  components: {
    ordersee
  },
  name: "Info",
  data() {
    return {
      fullscreenLoading:false,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      afterSalesFlag:false,
      addressFlag:false,
      dialogFormVisible:false,
      ruleForm:{},
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      types: '全部订单',
      activeName: 'first',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 人员信息表格数据
      infoList: [{
        createTime:'2023-08-25 11:46:02',
        ClassName:'类别1',
        code:'123123123',
        memberName:'用户名',
        memberAddressUuid:'123321123',
        goodsName:'商品名称',
        goodsPrice:'100',
        postagePrice:'0',
        countPrice:'0',
        status:'1',
        shipmentStatus:'1',
        address:'河北省邯郸市丛台区xxx大厦xxx号xxx',
        express:'顺丰',
        expressNum:'221321321'
      }],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderCode: null,
        goodsId: null,
        goodsName: null,
        status: null,
        isFinish: null,
        finishTime: [],
        payTime: [],
        createTime: [],
        countPrice: null,
        postagePrice: null,
        goodsPrice: null,
        actualPay: null,
        memberUuid: null,
        memberName: null,
        memberAddressUuid: null,
        shipmentStatus: null,
        marker: null,
        isDelete: null,
        goodsImgs: null,
        isEffective: null,
        // type: null,
        payType: null,
        effectiveTime: null,
        deliveryCode: null,
        deliveryType: '1',
        sellerMemberUuid: null,
        sellerMemberName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        appletExpressCompany: [
          { required: true, message: '请输入快递公司', trigger: 'blur' }
        ],
        appletExpressCode: [
          { required: true, message: '请输入快递单号', trigger: 'blur' }
        ],
      },
      cardtypes: false,
      forms: {},
      classtree:[],
      afterSalesData:{},
    };
  },
  created() {
    this.getList();
    // this.gettree()
  },
  methods: {
    // 确认收货
    agreeReceive(){
      agreeAfterExpress({
        appletAfterId:this.afterSalesData.appletAfterId,
      }).then(res => {
        this.$message({
          type: 'success',
          message: '确认收货成功!'
        });
        this.afterSalesFlag=false
        this.getList()
      });
    },
    agree(){
      if(this.afterSalesData.appletAfterType=='160'){
        agreeOrderAfter({
          appletAfterId:this.afterSalesData.appletAfterId,
        }).then(res => {
          this.$message({
            type: 'success',
            message: '同意成功!'
          });
          this.afterSalesFlag=false
          this.getList()
        });
      }else{
        this.$prompt('请输入售后地址', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$alert('您输入的售后地址是：'+ value, '确认地址', {
            confirmButtonText: '确定',
            callback: action => {
              var body={address:value}
              agreeOrderAfter({
                appletAfterId:this.afterSalesData.appletAfterId,
                appletAfterRemarks:JSON.stringify(body)
              }).then(res => {
                this.$message({
                  type: 'success',
                  message: '同意成功!'
                });
                this.afterSalesFlag=false
                this.getList()
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      }

    },
    refuse(){
      this.$prompt('请输入拒绝原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{1,20}$/,
        inputErrorMessage: '拒绝原因不能大于20字'
      }).then(({ value }) => {

        var body={refuse:value}
        objectToOrderAfter({
          appletAfterId:this.afterSalesData.appletAfterId,
          appletAfterRemarks:JSON.stringify(body)
        }).then(res => {
          this.$message({
            type: 'success',
            message: '拒绝成功!'
          });
          this.afterSalesFlag=false
          this.getList()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    // 处理售后
    afterSales(appletOrderId){
      getAppletOrderAfterByOrderId({
        appletOrderId:appletOrderId,
      }).then(res => {
        this.afterSalesData.appletAfterRemarks=""
        this.afterSalesData=res.data
        this.url='http://img.tdfx.com.cn'+this.afterSalesData.appletAfterVoucher
        console.log(this.url)
        this.srcList=['http://img.tdfx.com.cn'+this.afterSalesData.appletAfterVoucher]
          if(this.afterSalesData.appletAfterType=='160'){
            // 仅退款
            if(this.afterSalesData.appletAfterStatus==2001){
              // 提交了没审核
              this.afterSalesData.appletAfterStatusCon='待审核'
            }else if(this.afterSalesData.appletAfterStatus==2005){
              // 提交了拒绝了
              this.afterSalesData.appletAfterStatusCon='已拒绝'
              this.afterSalesData.appletAfterRemarks=''
            }else if(this.afterSalesData.appletAfterStatus==2010){
              // 提交了同意了
              this.afterSalesData.appletAfterStatusCon='已同意'
              if(this.afterSalesData.appletOrderDto.appletOrderStatus==1006){
                // 提交了退款了
                this.afterSalesData.appletAfterStatusCon='已退款'
              }
            }
          }else{
            // 退货退款
            if(this.afterSalesData.appletAfterStatus==2001){
              // 提交了没审核
              this.afterSalesData.appletAfterStatusCon='待审核'
            }else if(this.afterSalesData.appletAfterStatus==2005){
              // 提交了拒绝了
              this.afterSalesData.appletAfterStatusCon='已拒绝'
              this.afterSalesData.appletAfterRemarks=''

            }else if(this.afterSalesData.appletAfterStatus==2010){
              // 提交了同意了
              this.afterSalesData.appletAfterStatusCon='同意待寄回'
              this.afterSalesData.appletAfterRemarks=JSON.parse(this.afterSalesData.appletAfterRemarks).address

              if(this.afterSalesData.appletOrderDto.appletOrderStatus==1006){
                // 提交了退款了
                this.afterSalesData.appletAfterStatusCon='已退款'
              }
            }else if(this.afterSalesData.appletAfterStatus=='2003'){
              //提交了用户寄回了
              this.afterSalesData.appletAfterStatusCon='同意已寄回'
              this.afterSalesData.appletAfterRemarks=JSON.parse(this.afterSalesData.appletAfterRemarks).address

            }
          }





        this.afterSalesFlag=true
      });


    },
    submitForm(){},
    changeAddress(){
      this.addressFlag=true
    },
    gettree(){
      getGoodsClassTree().then(response => {
        this.classtree = response.data
      });
    },

    sendOut(appletOrderId){
      this.ruleForm={}
      this.dialogFormVisible=true
      this.ruleForm.appletOrderId=appletOrderId
    },
    // 确认发货
    submitSend(){

      deliveryStoreAppletOrder(this.ruleForm).then(res => {
        this.$message({
          type: 'success',
          message: '发货成功!'
        });
        this.dialogFormVisible=false
       this.getList()
      });
    },
    // 订单详情弹框
    orderbtn(appletOrderId) {
      this.$refs.ordersee.init(appletOrderId)
    },

    handleClick() {


      this.queryParams.pageNum = 1
      this.getList();
    },
    funtime(time,startname,endname) {
      if(this.queryParams[time]){
        if(this.queryParams[time].length>0){
          this.queryParams[startname] = this.queryParams[time][0]
          this.queryParams[endname] = this.queryParams[time][1]
        }
      }

    },
    getList() {
      // this.fullscreenLoading=true
      // this.loading = true;
      // this.funtime('finishTime','startFinishTime','endFinishTime')
      // this.funtime('payTime','startPayTime','endPayTime')
      // this.funtime('createTime','startCreateTime','endCreateTime')
      // let body={...this.queryParams}
      // if(body.appletOrderStatus==0){
      //   body.appletOrderStatus=''
      // }
      // getAppletOrderPageList(body).then(res => {
      //   this.infoList = res.data.rows;
      //   this.total = res.data.total;
      //   this.fullscreenLoading = false;
      //   this.loading = false;
      // });
    },
    // 表单重置
    reset() {
      this.form = {
        uuid: null,
        name: null,
        code: null,
        phone: null,
        sex: null,
        address: null,
        provincial: null,
        city: null,
        area: null,
        handUrl: null,
        remark: null,
        type: null,
        status: null,
        idCard: null,
        personName: null,
        isShop: null,
        username: null,
        password: null,
        creditScore: null,
        email: null,
        signature: null,
        alibabaId: null,
        createTime: null,
        updateTime: null,
        isDelete: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    }
  }
};
</script>
<style scoped lang="scss">
.contantlist {
  .contantlist-top {
    display: flex;
    font-size: 14px;
    color: #797979;
    border-bottom: 1px #F2F2F2 solid;
    height: 60px;
    align-items: center;
    justify-content: space-between;

    span {
      margin-left: 20px;
    }
  }

  .contantlist-center {
    display: flex;
    color: #666666;
    padding-top: 20px;
    font-size: 14px;
    justify-content: space-between;
    border-bottom: 1px #F2F2F2 solid;
    padding-bottom: 20px;

    .title {
      font-weight: 600;
      margin-bottom: 6px;
    }

    .orderbtn {
      margin-top: 20px;
    }
  }

  .contantlist-bot {
    font-size: 14px;
    color: #797979;
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 10px #F2F2F2 solid;
    position: relative;
    .orderbtn{
      position: absolute;
      right: 0px;
    }
    span {
      margin-right: 30px;
    }
  }
}
.orderBtnHidden{
  visibility: hidden;
}
</style>
